<template>
  <div>
    <p style="margin: 15px 0; color: #9998a9">
      {{ formatTimestamp(topList.createTime) }}
    </p>
    <div class="top-box" :class="isShadow?'boxShadow':''">
      <p>{{ topList.title }}</p>
      <div
        class="top-box-list"
        style="background: linear-gradient(180deg, rgba(8,131,241,0.028) 0%, rgba(8,131,241,0.012) 100%);border: 1px solid rgba(8,131,241,0.08); position: relative"
      >
        <div
          v-for="(topItemCard, topItemIndex) in topList.card"
          class="top-box-list-item top-box-list-item-border"
          :key="topItemIndex"
        >
          <p class="ztfx-span" style="margin-bottom: 0px;">
            {{ topItemCard.sub }}
            <strong>{{ topItemCard.name }}</strong>
          </p>
        </div>
      </div>
      <div
        class="gzlc_box"
        v-for="(item, index) in topList.linkUrl"
        :key="'list2-' + index"
        @click="gotodetails(item)"
      >
        <img src="../../assets/images/gzlc_icon.png" alt="" />
        <p>{{ item.name }}</p>
      </div>
      <p class="askMe">你可以尝试这样问我</p>
      <div
        v-for="(topItemLink, topItemLinkIndex) in topList.link"
        class="top-box-list-item-link"
        :key="topItemLinkIndex"
        @click="sendMessageBy(topItemLink)"
      >
        {{ topItemLink }}
      </div>
    </div>
  </div>
</template>

<script>
import commonFunc from "@/utils/ysjh";

export default {
  props: {
    topList: {
      type: Object,
      default: () => ({}),
    },isShadow: {
    type: Boolean,
    default: false,
  },
  },
  methods: {
    gotodetails(item) {
      console.log(item.url, "item");
      const { openSource, openType, functionCode, param } = item.url;
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    sendMessageBy(e) {
      this.$parent.showCollect = false;
      this.$parent.someMethod(e);
    },
    formatTimestamp(ms) {
      if (!ms) {
        return "";
      }
      const time = Number(ms);
      if (!time || isNaN(time)) return "-";
      const d = new Date(time);
      const Y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, "0");
      const D = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>

<style lang="less" scoped>
.ztfx-span {
  opacity: 1;
  color: #666666 !important;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: justified;
  background: none !important;
  font-weight: normal !important;
}

.top-box-list-item-border {
  // border-bottom: 1px solid #aecde8;
}

.gzlc_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 97px;
  height: 36px;
  background: url("@/assets/images/gzlc_box.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 15px;
  font-size: 13px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;

  img {
    width: 16px;
    height: 16px;
    margin-right: 2px;
    vertical-align: middle;
  }
}

.guoqing {
  position: absolute;
  top: -20px;
  left: 0;
  background: url("@/assets/iconIndex/guoqing.png") no-repeat center center;
  width: 146px;
  height: 39px;
  background-size: 146px 39px;
  color: white;
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 15px;
  text-align: center;
  font-style: italic;
}
</style>
